﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .navbar {
            display: none;
        }
    </style>
</head>
<body>
    <!--查询-->
  <form class="layui-form" action="">
		<div class="layui-form-item">
        <div class="layui-input-inline">
        <input type="text" placeholder="请输入标题" name="Title" class="layui-input">
        </div>
            <button class ="layui-btn layui-bg-blue" lay-submit lay-filter="search"> 查询</button>
            <button type="button" class="layui-btn layui-btn-normal" id="addBtn">新增</button>

        </div>
    </form>
    <!-- 表格-->
    <table class="layui-hide" id="role-table"></table>


	<!-- 新增对话框 -->
	<div id="addDialog" style="display: none; padding: 15px; width: 100%;overflow: auto;">
		<form class="layui-form" id="addForm" lay-filter="addForm">
            <table style="width:800px">
				<tr>
					<td width="300px">
						<div class="layui-form-item">
                            <label class="layui-form-label" style="width:100px">标题</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
							</div>
						</div>
					</td>
				</tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:100px">内容</label>
                            <div class="layui-input-block">
                                <textarea name="content" placeholder="请输入内容" class="layui-textarea" >
                                    </textarea>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:100px">上传人</label>
                            <div class="layui-input-block">
                                <input type="text" name="createName" lay-verify="required" placeholder="请输入上传人" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:100px">上传时间</label>
                            <div class="layui-input-block">
                               
                                    <input type="text" class="layui-input" name="createTime" id="ID-laydate-type-datetime" placeholder="请选择时间">
                               
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:100px">状态</label>
                            <div class="layui-input-block">
                              <input type="checkbox" id="Status" checked name="Statue" lay-skin="switch" lay-filter="switchTest" title="开关">
                               </div>
                        </div>
                    </td>
                </tr>
			</table>	
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit lay-filter="addSubmit">添加</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer', 'laypage', 'form', 'laydate'],
            function () {
                var table = layui.table;
                var $ = layui.jquery;
                var layer = layui.layer;
                var laypage = layui.laypage;
                var form = layui.form;
                var laydate = layui.laydate;
                var totalcount = 0;
                // 初始化日期时间选择器
                initDateTimePicker();

                // 初始化表格
                initTable();

              

                // 初始化日期时间选择器
                function initDateTimePicker() {
                    laydate.render({
                        elem: '#ID-laydate-type-datetime',
                        type: 'datetime'
                    });
                }

                // 初始化表格
                function initTable() {
                    table.render({
                        elem: '#role-table',
                        id: 'Messagetable',
                        height: '500',
                        cols: [[
                            { field: 'messageId', width: 80, sort: true, fixed: 'left', title: 'ID' },
                            { field: 'title', width: 130, title: '通知标题' },
                            { field: 'content', width: 400, title: '内容' },
                            { field: 'createName', title: '上传者', width: 160 },
                            { field: 'createTime', width: 160, title: '上传时间' }
                        ]],
                        page: true, // 开启分页
                        limit: 15, // 默认每页显示15条
                        limits: [2, 15, 30, 50] // 可选每页显示条数
                    });
                }

                // 加载数据
                function loadData(PageIndex, PageSize) {
                    layer.load(2);
                    var Title = $('[name="Title"]').val();
                    var params = {
                        PageIndex: PageIndex || 1, // 默认第一页
                        PageSize: PageSize || 15,   // 默认每页15条
                        Title: Title
                    };
                    $.ajax({
                        url: '@ViewBag.BaseUrl/T5/Message/GetMessage',
                        data: params,
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            layer.closeAll('loading');
                            if (res.code === 100) {
                                totalcount=res.totalCount;
                                reloadTable(res.data, res.totalCount, PageSize, PageIndex);
                                renderPagination(res.totalCount, PageSize, PageIndex);
                            } else {
                                layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.closeAll('loading');
                            layer.msg('请求失败: ' + error, { icon: 2 });
                            console.error('Ajax请求失败:', xhr.responseText);
                        }
                    });
                }

                // 重新加载表格数据
                function reloadTable(data, count, limit, curr) {
                    table.reload('Messagetable', {
                        data: data,
                        count: count,
                        limit: limit || 15,
                        curr: curr || 1,
                    });
                }

                // 渲染分页
                function renderPagination(count, limit, curr) {
                    laypage.render({
                        count: count, // 数据总数
                        curr: curr,
                        limit: limit,
                        limits: [2, 15, 30, 50],
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        jump: function (obj, first) {
                            if (!first) {
                                loadData(obj.curr, obj.limit);
                            }
                        }
                    });
                }
                // 页面加载完成后获取数据
                loadData(1, 300);

                // 表单提交事件
                form.on('submit(search)', function () {
                    loadData();
                    return false;
                });

                // 新增按钮点击事件
                $('#addBtn').on('click', function () {
                    layer.open({
                        type: 1,
                        title: '新增',
                        area: ['60%', '60%'],
                        content: $('#addDialog'),
                        success: function () {
                            // 重置表单
                            $('#addForm')[0].reset();
                            // 初始化日期选择器
                            laydate.render({
                                elem: '#date',
                                trigger: 'click'
                            });
                            form.render();
                        }
                    });
                });
                // 新增表单提交
                form.on('submit(addSubmit)', function (data) {
                    var formData = data.field;
                    var postData = {
                        messageId: 0,
                        title: formData.title,
                        content: formData.content,
                        createName: formData.createName,
                        createTime: formData.createTime,
                        statue: $("#Status").prop('checked'),
                        isDeleted: false
                    };

                    layer.load(2);
                    $.ajax({
                        url: 'https://localhost:7027/api/Message/CreateMessage',
                        type: 'post',
                        contentType: 'application/json',
                        data: JSON.stringify(postData),
                        dataType: 'json',
                        success: function (res) {
                            layer.closeAll('loading');
                            if (res.code == 100) {
                                layer.alert(res.test, {
                                    title: '操作成功',
                                    icon: 1,
                                    btn:['确定'],
                                    yes: function (index, layero) {
                                        document.getElementById("addForm").reset();
                                        form.render();
                                        layer.close(index);
                                        layer.closeAll(); // 关闭所有弹层
                                        loadRoleData(); // 刷新表格数据
                                    }
                                });
                            } else {
                                layer.alert(res.test, {
                                    title: '操作失败',
                                    icon: 2
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.closeAll('loading');
                            layer.alert('请求失败: ' + error, {
                                title: '错误',
                                icon: 2,
                                btn: ['确定']
                            });
                            console.error('AJAX请求失败:', status, error);
                            console.error('响应内容:', xhr.responseText);
                        }
                    });
                    return false;
                });

            });
           
    
               
      
      
    </script>


</body>
</html>
